<template>
  <div class="container">
    <!-- 侧边栏部分 -->
    <div class="aside-left">
        <Menus/>
    </div>
    <!-- 右边搜索部分和文章部分 -->
    <div class="main-right">
      <!-- 搜索框部分 -->
      <SearchCity  @changeData="setData"/>
      <!-- 推荐攻略部分 -->
      <WritePost/>
      <!-- 文章部分 -->
      <PostList :postLists="dataList"/>
      <!-- 分页部分 -->
    
    </div>
  </div>
</template>

<script>
import Menus from "@/components/post/menus.vue"
import PostList from "@/components/post/postList.vue"
import WritePost from "@/components/post/writePost.vue"
import SearchCity from "@/components/post/searchCity.vue"
export default {
  data(){
    return{
            // 定义一个数组来接受返回来的数据
            
            dataList:[],
            // 分页的变量
            
    }
  },
  components:{
      Menus,
      PostList,
      WritePost,
      SearchCity
  },
  methods:{
    setData(e){
      this.dataList = e;
      // console.log(e);
    }
  },
  beforeRouteUpdate(to,from,next){
    this.$axios({
        url:"/posts",
        params:to.query
      }).then(res=>{
        const {data} = res.data;
        this.dataList= data;
        console.log(123);
        next();       
      })
  },
  mounted(){
      this.$axios({
        url:"/posts"
      }).then(res=>{
        const {data} = res.data;
        this.dataList= data;
        console.log(data);
      })
  }
};
</script>

<style lang="less" scoped>
.container {
  padding: 15px 0;
  width: 1000px;
  margin: 0 auto;
  display: flex;
  .aside-left {
    position: relative;
    margin-right: 30px;
    // height: 500px;
    // background-color: red;
  }
  .main-right {
    flex: 1;
    width: 700px;
  }
}
</style>